<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				单选按钮说明文档
			</div>
			<div class="sub-title quote">
				单选组件包含 radio、radio-button、radio-group三个组件<br>
				你只需要引入Radio，即可使用三个组件
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
				<template slot="code-js">{{ jsCode2 }}</template>
			</code-view>
			
			<div class="example-title">按钮组样式</div>
			<div class="example-sub-title quote">
				你可以把单选框变成按钮的样子，它需要&lt;gr-radio-group&gt;和&lt;gr-radio-button&gt;搭配使用
			</div>
			<code-view>
				<template slot="code-html">{{ htmlCode3 }}</template>
				<template slot="code-js">{{ jsCode3 }}</template>
			</code-view>
			
			<div class="example-title">&lt;gr-radio&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain1" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="140">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="60">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="60">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			<div class="example-title">&lt;gr-radio-group&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain2" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="120">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="140">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="90">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="60">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			
			<div class="example-title">&lt;gr-radio-group&gt;事件</div>
			<gr-table :width="800" :tableData="propertiesExplain3" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="事件名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="事件说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="事件回调参数" width="120">
						{{rowData.param}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/radiodemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
				mode: 'hell',
				sex: 1,
jsCode1: `import {Radio} from 'gabriel-ui'
Vue.use(Radio)`,
htmlCode2: `<gr-radio v-model="sex" label="1">男</gr-radio>
<gr-radio v-model="sex" label="0">女</gr-radio>
`,
jsCode2: `export default {
	data() {
		sex: 1
	}
}
`,
htmlCode3: `<gr-radio-group v-model="mode" size="medium">
	<gr-radio-button label="easy">简单模式</gr-radio-button>
	<gr-radio-button label="hard">困难模式</gr-radio-button>
	<gr-radio-button label="hell">地狱模式</gr-radio-button>
</gr-radio-group>
`,
jsCode3: `export default {
	data() {
		mode: 'hell'
	}
}
`,
				propertiesExplain1: [
					{
						attrName: 'v-model',
						introduce: `单选框组的value值`,
						type: 'String/Number/Boolen',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'label',
						introduce: `单个Radio的value`,
						type: 'String/Number/Boolen',
						optionValues: '----',
						defaultValue: '----'
					}
				],
				propertiesExplain2: [
					{
						attrName: 'v-model',
						introduce: `单选框组的value值`,
						type: 'String/Number/Boolen',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'size',
						introduce: `按钮组的大小`,
						type: 'String',
						optionValues: 'mini,small,medium,large',
						defaultValue: 'medium'
					}
				],
				propertiesExplain3: [
					{
						attrName: 'change',
						introduce: `value值发生改变时触发`,
						param: '选中的Radio值'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			btnClick(e) {
				console.log(e)
			},
			radioChange(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style lang="scss">
	
</style>
